<template>
    <div class="page">
        <!--顶部导航栏-->
        <div class="bg-color-box">
            <!--顶部导航栏-->
            <van-nav-bar class="nav-bar-box" :left-arrow="true" @click-left="onClickLeft">
                <div slot="left">
                    <i class="go-back-icon"></i>
                    <span class="title">扫一扫</span>
                </div>
            </van-nav-bar>
        </div>

        <!--个人信息面板-->
        <div class="module-box info-panel" v-if="codeType == 'visit'">
            <div class="title">个人信息</div>

            <div class="div-box">
                <label>姓名：</label>
                <span>{{visitInfo.personName}}</span>
            </div>

            <div class="div-box">
                <label>联系电话：</label>
                <span>{{visitInfo.personPhone}}</span>
            </div>
        </div>

        <!--拜访业主信息面板-->
        <div class="module-box info-panel">
            <div class="title" v-if="codeType == 'visit'">拜访业主信息</div>
            <div class="title" v-if="codeType == 'owner'">住户信息</div>

            <div class="div-box">
                <label>姓名：</label>
                <span>{{personInfo.personName}}</span>
            </div>

            <div class="div-box">
                <label>是否被隔离：</label>
                <span class="isolate" v-if="isolationIcon == 1">已被隔离</span>
                <span class="notIsolate" v-if="isolationIcon == 2">未被隔离</span>
            </div>

            <div class="div-box">
                <label>住址：</label>
                <span>{{personInfo.detailAddress}}</span>
            </div>

            <div class="div-box">
                <label>是否是业主：</label>
                <span>{{personInfo.communityId!=null?"是":"否"}}</span>
            </div>

            <div class="div-box">
                <label>联系电话：</label>
                <span>{{personInfo.personPhone}}</span>
            </div>
        </div>

        <!--健康情况信息面板-->
        <div class="module-box info-panel">
            <div class="title">健康情况信息</div>

            <div class="div-box temperature">
                <label>体温：</label>
                <span class="number">
                    <input type="text" v-model="temperature"/>度
                </span>
            </div>

            <!--体温异常警告-->
            <div class="warning" v-if="temperature > 37">
                <i class="icon"></i>
                温馨提示：体温异常
            </div>


            <div class="div-box">
                <label>当前时间：</label>
                <span>{{timeInfo}}</span>
            </div>
        </div>

        <!--提交按钮-->
        <div class="btn-box">
            <van-button block @click="clickSubmit()">提交</van-button>
        </div>

    </div>
</template>

<script>
    import {NavBar,Button,Toast,Dialog} from 'vant';

    export default {
        name: 'scan',

        components: {
            [NavBar.name]: NavBar,
			[Button.name]: Button,
            [Toast.name]: Toast,
            [Dialog.name]: Dialog,
        },
        props: {},
        data() {
            return {
				temperature: '',      //体温
                isolationIcon: 2,
                personInfo:{},
                visitInfo:{},
                setData:{},
                codeType:"owner",
                timeInfo:"",
                personCodeData:{}
            }
        },
        mounted() {            
            if (this.$Cookies.get('personCodeData')) {
                let dataInfo = this.$Cookies.get('personCodeData');
                this.personCodeData = JSON.parse(dataInfo);
//                Dialog({
//                    title: '06',
//                    message: dataInfo,
//                });
                this.codeType = this.personCodeData.QRCodeType;
                this.getPersonInfo(this.personCodeData.personPhone);
                if (this.codeType == "visit") {
                    this.personInfo.personName = this.personCodeData.ownerName;
                    this.personInfo.address = this.personCodeData.ownerAddress;
                }
            }
            this.timeInfo = this.$utils.dateTime(Date.parse(new Date()));            
        },
        methods: {
            onClickLeft(){
                this.$router.go(-1);
            },
            getPersonInfo(val = ''){
                this.$axios.get(this.$api.queryPersonInfo, {
                    params: {
                        personPhone: val,
                    }
                }).then(success => {
                    if(success.data.code == '200'){
                        this.setData = success.data.data[0];
                        if (this.codeType == "visit") {
                            this.visitInfo = success.data.data[0];
                        } else if(this.codeType == "owner"){
                            this.personInfo = success.data.data[0];
                        } else {

                        }                        
                    }
                }).catch(error => {

                })
            },
            //提交
            addInfo() {
                
                this.$axios.post(this.$api.insertRecord, {
                        ownerName:this.setData.personName,
                        personId:this.setData.personId,
                        communityId:this.$Cookies.get('communityId'),
                        detailedAddress:this.setData.detailAddress,
                        temperature:this.temperature,
                        recordTime:this.timeInfo,
                        state: this.codeType == "owner"? this.personCodeData.type:undefined,
                        staffId:this.$Cookies.get('personId'),

                       /* ownerName:"刘艳兵",
                        personId:"00022",
                        communityId:"2",
                        detailedAddress:"丁香路",
                        temperature:this.temperature,
                        recordTime:this.timeInfo,
                        staffId:"005",*/
                }).then(success => {
                    if(success.data.code == '200'){
						Toast('提交成功');
						this.$router.go(-1);
                    }
                }).catch(error => {

                })
            },
            //点击提交
			clickSubmit(){
                /*let json = {
                    QRCodeType:"visit",
                    personPhone:"18239933120",
                    ownerAddress:"8号",
                    ownerName:"刘洋",
                }*/
                //console.log(this.$store)
                //this.$store.dispatch('test/openPerson',JSON.parse(JSON.stringify(json)))
                //console.log(this.$store.state.test.personData,'vvv')
                this.addInfo();
            },
        },
    }
</script>

<style lang="scss" scoped>
    /*个人信息*/
    .info-panel{
        padding: 10px 20px;

        .title{
            font-size: 18px;
            font-weight: bold;
            color: #222222;
        }

        .div-box{
            font-size: 15px;
            color: #222222;
            margin-top: 10px;

            .isolate{
                border: solid 1px #e90b0b;
                color: #e90b0b;
                font-size: 12px;
                padding: 2px 6px;
            }
            .notIsolate{
                border: solid 1px #61dda3;
                color: #61dda3;
                font-size: 12px;
                padding: 2px 6px;
            }
        }
        /*体温*/
        .temperature{
            background-color: #f0f2f5;
            padding: 10px;
            border-radius: 4px;

            .number{
                float: right;

                input{
                    padding-right: 10px;
                    color: #999999;
                    text-align: right;
                    border: none;
                    background-color: transparent;
                }
            }
        }

        /*体温警告*/
        .warning{
            text-align: right;
            font-size: 15px;
            font-weight: bold;
            color: #e90b0b;
            padding-top: 2px;

            .icon{
                display: inline-block;
                width: 16px;
                height: 16px;
                background: url("../assets/images/warning-icon.png") no-repeat;
                background-size: cover;
                vertical-align: text-top;
            }
        }
    }

    /*提交按钮*/
    .btn-box{
        width: 94%;
        margin: 0 auto;
        margin-top: 50px;

        .van-button--default {
            background: linear-gradient(to bottom right, #61dda3, #07b6d5);
            border-radius: 8px;
        }
        .van-button__text{
            font-size: 18px;
            font-weight: bold;
            color: white;
        }
    }

</style>

